<template>
  <div>
    <el-form-item label="数据类型" prop="fieldType">
      <el-select
        v-model="form.fieldType"
        placeholder="请选择"
        @change="fieldTypeChange"
      >
        <el-option label="字符串" value="string"> </el-option>
        <el-option label="对象" value="object"> </el-option>
        <el-option label="数组" value="array"> </el-option>
        <el-option label="树" value="tree"> </el-option>
        <el-option label="自定义" value="custom"> </el-option>
      </el-select>
    </el-form-item>

    <template v-if="form.fieldType == 'string'">
      <el-form-item label="字符串" prop="data">
        <el-input v-model="form.data"></el-input>
      </el-form-item>
    </template>

    <template v-if="form.fieldType == 'object'"> 实现中...... </template>

    <template v-if="form.fieldType == 'array'" class="set-array">
      <el-form-item>
        <el-row :gutter="10" v-for="(item, index) in form.data" :key="index">
          <el-col :span="11">
            <el-input v-model="item.value" placeholder="value"></el-input>
          </el-col>
          <el-col :span="11">
            <el-input v-model="item.label" placeholder="label"></el-input>
          </el-col>
          <el-col :span="2">
            <i class="el-icon-delete" @click="removeArray(index)"></i>
          </el-col>
        </el-row>
        <el-button @click="addArray">新增</el-button>
      </el-form-item>
    </template>

    <template v-if="form.fieldType == 'tree'"> 实现中...... </template>

    <template v-if="form.fieldType == 'custom'">
      <editor
        v-model="eventContent"
        @init="editorInit"
        :options="editorOptions"
        lang="json"
        theme="chrome"
        width="100%"
        height="200"
      ></editor>
    </template>
  </div>
</template>

<script>
export default {
  props: ["form"],
  components: {
    editor: require("vue2-ace-editor"),
  },
  data() {
    return {
      eventContent: "",
      editorOptions: {
        enableBasicAutocompletion: true, // 启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, // 启用实时自动完成
        printMarginColumn: 30,
        displayIndentGuides: false, // 显示参考线
        enableEmmet: true, // 启用Emmet
        tabSize: 5, // 标签大小
        fontSize: 12, // 设置字号
        useWorker: true, // 使用辅助对象
        showPrintMargin: false, //去除编辑器里的竖线
        enableMultiselect: true, //     选中多处
        readOnly: false, // 是否只读
        showFoldWidgets: true, // 显示折叠部件
        fadeFoldWidgets: true, // 淡入折叠部件
        wrap: true, //换行
      },
    };
  },
  methods: {
    editorInit: function () {
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/theme/chrome");
      require("brace/mode/json"); //language
      require("brace/snippets/json"); //snippet
    },
    /**
     * 根据类型赋初始值
     */
    fieldTypeChange() {
      if (this.form.fieldType == "string") {
        this.form.data = "";
      }
      if (this.form.fieldType == "array") {
        this.form.data = [];
      }
      if (this.form.fieldType == "object") {
        this.form.data = {};
      }

      if (this.form.fieldType == "custom") {
        this.form.data = "";
      }
    },
    addArray() {
      this.form.data.push({
        value: "",
        label: "",
      });
    },
    removeArray(index) {
      this.form.data.splice(index, 1);
    },
  },
  mounted() {
    if (this.form.fieldType == "custom") {
      this.eventContent = JSON.stringify(this.form.data, null, 2);
    }
  },
};
</script>

<style lang="scss"  scoped>
.el-select {
  width: 100%;
}
::v-deep .el-form-item__label {
  padding-bottom: 5px !important;
}
::v-deep .el-form-item {
  margin-bottom: 5px;
}
::v-deep .el-button {
  width: 100% !important;
}

.el-icon-delete {
  cursor: pointer;
}
</style>